﻿@using System.Collections
<style type="text/css">
    .div {
        margin-top: 10px;
    }
    
    .div select {
        float: left;
        height: 200px
    }
    
    .div p {
        
    }
    
    .buttonmove 
    {
        height: 200px;
        float: left;
        vertical-align: middle;
        padding-left: 20px;
        padding-right: 20px;
        padding-top:30px
    }

</style>
<div class="div">
    @Html.Label("Choose City (only one)")
    @Html.ListBox("CurrentCity", new SelectList(ViewBag.CurrentCity as IEnumerable))
    <div class="buttonmove">
        <input type="button" value="<<<" id = "AddCity" ><br/>
        <input type="button" value=">>>" id = "RemoveCity" >
    </div>
    @Html.ListBox("SelectCity", new SelectList(ViewBag.Cities as IEnumerable))

</div>

<div style="clear: both"></div>

<div class="div">
    @Html.Label("Choose Districts (can be more than one)")
    @Html.ListBox("CurrentDistrict", new SelectList(ViewBag.CurrentDistricts as IEnumerable))
    <div class="buttonmove">
        <input type="button" value="<<<" id = "AddDistrict"  ><br/>
        <input type="button" value=">>>" id = "RemoveDistrict"  >
    </div>
    @Html.ListBox("SelectDistrict", new SelectList(ViewBag.Districts as IEnumerable))

</div>

<div style="clear: both"></div>
<p>
    <input type="submit" onclick="SetSelectedListBox()" value="Save Group" style="margin-top: 50px" />
</p>

<script type="text/javascript">

    var SelectCity = $('#SelectCity');
    var CurrentCity = $('#CurrentCity');
    var SelectDistrict = $('#SelectDistrict');
    var CurrentDistrict = $('#CurrentDistrict');
    var url = '@Url.Action("DistrictList", "Group")';

    $(document).ready(function () {
    });

    $('#AddCity').click(function () {
        MoveItem(SelectCity, CurrentCity, url);
        SelectCity.attr("disabled", true);

        CurrentDistrict.find("option").remove();
    });

    $('#RemoveCity').click(function () {
        MoveItem(CurrentCity, SelectCity, null);
        SelectCity.attr("disabled", false);
        CurrentDistrict.find("option").remove();
    });

    $('#AddDistrict').click(function () {
        MoveItem(SelectDistrict, CurrentDistrict, null);
    });

    $('#RemoveDistrict').click(function () {
        MoveItem(CurrentDistrict, SelectDistrict, null);
    });

    function SetSelectedListBox() {
        CurrentCity.find("option").each(function () {
            $(this).attr("selected", "selected");
        });
        CurrentDistrict.find("option").each(function () {
            $(this).attr("selected", "selected");
        });
    }

</script>